<template>
  <div class="playtext">
   <div class="lrc" ref="lrc">
  
     <p :class="{'add':times>lsts[index]&&times<lsts[index+1]}" v-for="(itm,key,index) in texts" :key="index">
      <span >{{itm}}{{scoll(index)}}</span> 
       </p>
   </div>
  </div>
</template>
<script>


export default {
   name:'Plattext',
   props:{
     ztext:{
       type:Object,
       default:''
     },
     times:{
       type:Number,
       default:0
     }
        
     
  
   },
  data() {
    return{
      texts:'',
      lsts:[]
    } 
  },
  created(){
    // console.log(this.times);
  this.filter(this.ztext.lrc.lyric)
 
  
   
  },
  methods:{
    filter(text){
      var lrc={}
   if (!text) return
   var result=text.split('\n')
   var reg=/\[\d*:\d*(\.|:)\d*]/g
   for (let i = 0; i < result.length; i++) {
    var ss=result[i].match(reg)
   if (!ss)  continue
   
   var context=result[i].replace(ss,"")
   
  //  获取时间
  var t =ss[0]
  var min=t.match(/\[\d*/i).toString().slice(1)*1
  var sec=t.match(/\:\d*/i).toString().slice(1)*1
 var time=min*60+sec
 lrc[time]=context
 

     
   }
 
     this.texts=lrc
    //  console.log( this.texts,'zzuj');
     this.fun(this.texts)
   
    },
    fun(arr){
  for (let k in arr) {
     this.lsts.push(k)
    
  }
  // console.log(this.lsts,'k');
    },
    scoll(index){
if (this.times>this.lsts[index]&&this.times<this.lsts[index+1]) {
  this.$refs.lrc.style.top=(-30*(index-2))+"px"
  
}
    }

  }
}
</script>


<style lang="less" scoped>
.playtext{
  width: 360px;
  height: 120px;
  overflow:auto;
  position: relative;
 
}
.lrc{
  width: 100%;
  position: absolute;
  top: 0;
  transition: all 0.4s;
}
.lrc p{
  overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;/* 不换行 */
  height: 30px;
  line-height: 30px;
}
.up{
  margin-top: -30px;
}
.add{
  color: rgb(32, 11, 228);
}


</style>
